<template>
	<view class="box bg-f7">
		<view class="index-bg">
			<image :src="BASE_URL+ '/uploads/20250801/18fe0173c21d63e1b39c5ea423ee274e.png'" mode="widthFix"></image>
		</view>
		<view :style="{'height' :navBarHeight+'px'}"></view>
		<view class="z-1 padding-l-r-30">
			<view class="padding-30 align-items-center user-info" @click="profileUserInfo">
				<view class="bavatar-box">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view>
					<view class="fs-34 fw-b color-0 margin-b-10">{{userInfo.nickname|| '昵称'}}</view>
					<view class="align-items-center">
						<u-icon name='edit-pen-fill' color="#43ABC4"></u-icon>
						<text class="color-43 fs-24">完善信息</text>
					</view>
				</view>
			</view>
			<view class="bg-white margin-b-20 border-radio-14 padding-l-r-20">
				<view class="coupon-box align-items-center">
					<view class="align-items-center flex-1 coupon" @click="goPage('/pageA/mine/coupon/coupon')">
						我的优惠卷
						<text class="flex-1 color-0 fs-32 fw-b">{{coupon}}</text>
						<image src="/static/image/mine/right.png" mode="widthFix"></image>
					</view>
					<view class="align-items-center flex-1 family" @click="goPage('/pageA/family/family')">
						我的家庭
						<text class="flex-1 color-0 fs-32 fw-b">{{family}}</text>
						<image src="/static/image/mine/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="line"></view>
				<view class="align-items-center ordedr-box">
					<view class="flex-column flex-1 align-items-center"
						@click="goPage('/pageA/mine/order/order' ,'1') ">
						<image src="/static/image/mine/order-unpaid.png" mode="widthFix"></image>
						<text>未付款</text>
					</view>
					<view class="flex-column flex-1 align-items-center"
						@click="goPage('/pageA/mine/order/order' ,'2') ">
						<image src="/static/image/mine/order-paid.png" mode="widthFix"></image>
						<text>已付款</text>
					</view>
					<view class="flex-column flex-1 align-items-center"
						@click="goPage('/pageA/mine/order/order' ,'0') ">
						<image src="/static/image/mine/order-return.png" mode="widthFix"></image>
						<text>售后</text>
					</view>
					<view class="flex-column flex-1 align-items-center"
						@click="goPage('/pageA/mine/order/order' ,'') ">
						<image src="/static/image/mine/order-all.png" mode="widthFix"></image>
						<text>全部订单</text>
					</view>
				</view>

			</view>
			<view class="bg-white border-radio-14 padding-l-r-20">
				<view class="list-box">
					<view class="list-item align-items-center" @click="goPage('/pageA/healthPassbook/index')">
						<image src="/static/image/mine/icon-address.png" mode="widthFix"></image>
						<text class="flex-1">积分管理</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center" @click="goPage('/pageA/mine/serviceOrder/serviceOrder')">
						<image src="/static/image/mine/icon-address.png" mode="widthFix"></image>
						<text class="flex-1">我的服务预约</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center" @click="goPage('/pageA/address/index?type=1') ">
						<image src="/static/image/mine/icon-address.png" mode="widthFix"></image>
						<text class="flex-1">我的收货地址</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center">
						<image src="/static/image/mine/icon-help.png" mode="widthFix"></image>
						<text class="flex-1">帮助中心</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center" @click="goPage('/pageA/merchantCheck-in/apply')">
						<image src="/static/image/mine/icon-check.png" mode="widthFix"></image>
						<text class="flex-1">商家入住</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center">
						<image src="/static/image/mine/icon-online.png" mode="widthFix"></image>
						<text class="flex-1">在线客服</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="list-box">
					<view class="list-item align-items-center" @click="goPage('/pageA/mine/site/site'  ) ">
						<image src="/static/image/mine/icon-site.png" mode="widthFix"></image>
						<text class="flex-1">设置</text>
						<u-icon name="arrow-right" color="#707070"></u-icon>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	import avatar from '@/static/image/mine/avatar.png'
	import {
		getUserInfo
	} from '@/api/user'
    import {
        familyList
    } from '@/api/basicHealth'
	export default {
		data() {
			return {
				BASE_URL,
				navBarHeight: 0,
				nickName: '',
				avatar: '',
				coupon: 21, //我 的优惠券
				family: 0,
				userInfo: {}
			}
		},
		onShow() {
			this.getBarHeight()
			this.getUserInfo()
            this.getFamilyLength()
		},
		methods: {
			getBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 获取状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight;

				// 微信小程序默认导航栏高度（单位为 px）
				const defaultNavBarHeight = 44;

				// 总体头部导航栏高度（包含状态栏）
				this.navBarHeight = statusBarHeight + defaultNavBarHeight;

			},
			goPage(url, id) {
				let token = uni.getStorageSync('token')
				if (token) {
					if (url == '/pageA/mine/order/order') {
						uni.navigateTo({
							url: url + '?id=' + id
						})
					} else {
						uni.navigateTo({
							url
						})
					}
				} else {
					uni.showModal({
						confirmText:'去登录',
						showCancel:true,
						title:'提示',
						content:'您暂未登录，请先登录后查看',
						success(e) {
							if(e.confirm){
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})

				}
			},
			profileUserInfo() {
				let token = uni.getStorageSync('token')
				if (token) {
					uni.navigateTo({
						url: '/pageA/mine/personalData/personalData'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
            getFamilyLength() {
                let token = uni.getStorageSync('token')
                if (token) {
                    familyList( ).then(res => {
                        if (res.code == 1) {
                            this.family = res.data?.sick_list.length||0
                        }
                    })
                }
            },
            // 个人信息

			getUserInfo() {
				let token = uni.getStorageSync('token')
                console.log(4,token)
				if (token) {
					getUserInfo({
						token
					}).then(res => {
						if (res.code == 1) {
							this.userInfo = res.data
							uni.setStorageSync('userinfo', res.data)
							uni.setStorageSync('token', res.data.token)
						}
					})
				} else {
                    this.userInfo = {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {}

	.bavatar-box {
		width: 120rpx;
		height: 120rpx;
		margin-right: 24rpx;
		overflow: hidden;
		border-radius: 60rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.coupon-box {
		height: 90rpx;
		font-size: 28rpx;
		color: #333;

		.coupon {
			position: relative;
			padding-right: 21rpx;

			&::after {
				content: '';
				position: absolute;
				right: 7rpx;
				top: 50%;
				width: 1px;
				height: 40rpx;
				transform: translateY(-50%);
				background-color: #DBDBDB;
			}
		}

		.family {
			padding-left: 21rpx;
		}

		image {
			width: 26rpx;
		}

		text {
			margin-left: 14rpx;
		}
	}

	.ordedr-box {
		position: relative;
		height: 160rpx;
		font-size: 26rpx;
		color: #333;

		image {
			width: 60rpx;
			margin-bottom: 14rpx;
		}

		&::after {
			// content: '';
			left: 75%;
			top: 50%;
			position: absolute;
			width: 11rpx;
			height: 77rpx;
			background: #000000;
			opacity: 0.2;
			filter: blur(12rpx);
			transform: translate(0, -50%, );
		}
	}

	.list-item {
		height: 100rpx;
		font-size: 30rpx;
		color: #000;

		image {
			width: 38rpx;
			margin-right: 34rpx;
		}
	}
</style>
